<template>
    <el-dialog
        :before-close="resetForm"
        :close-on-click-modal="false"
        :visible.sync="visible"
        append-to-body
        title="修改密码"
        width="560px"
    >
        <div class="edit_page_div">
            <el-form ref="form" :model="form" :rules="rules" :show-message="false" label-width="100px">
                <el-form-item label="原密码" prop="oldPassword">
                    <el-input v-model="form.oldPassword" style="width: 400px;" type="password"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="form.newPassword" style="width: 400px;" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="form.confirmPassword" style="width: 400px;" type="password"></el-input>
                </el-form-item>
            </el-form>
            <div class="edit_button">
                <el-button v-loading.fullscreen.lock="loading" type="primary" @click="submit">保 存</el-button>
                <el-button type="primary" @click="resetForm">取 消</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script>

export default {
    name: "updatePassword",
    props: {
        visible: Boolean,
    },
    data() {
        return {
            loading: false,
            form: {
                oldPassword: '',
                newPassword: '',
                confirmPassword: '',
            },
            rules: {
                oldPassword: [{required: true, message: '', trigger: 'change'}],
                newPassword: [{required: true, message: '', trigger: 'change'}],
                confirmPassword: [{required: true, message: '', trigger: 'change'}],
            }
        }
    },
    methods: {
        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (this.form.newPassword === this.form.oldPassword) {
                        return this.$message.error('新密码不能与旧密码一至')
                    }
                    if (this.form.newPassword.length < 6 || this.form.newPassword.length > 20) {
                        return this.$message.error('密码长度在 6 到 20 个字符')
                    }
                    if (this.form.newPassword !== this.form.confirmPassword) {
                        return this.$message.error('两次输入的密码不同')
                    }
                    this.loading = true;
                    this.addSubmit();
                } else {
                    this.$message.error('表单填写有误');
                    return false;
                }
            });
        },
        addSubmit() {
            var form = this.form;
            this.$axios.post("/CHILD_SYSTEM/systemUser/updatePassword", {
                oldPassword: form.oldPassword,
                newPassword: form.newPassword,
                confirmPassword: form.confirmPassword,
            }).then(res => {
                this.resetForm();
                this.$message.success("修改密码成功！");
                this.loading = false;
            }).catch(() => {
                this.loading = false;
            })
        },
        resetForm() {
            this.$refs.form.resetFields();
            this.form = this.$options.data().form;
            this.$emit('update:visible', false);
        }
    }
}
</script>

<style scoped>

</style>